@font-face{
    font-family:'ocr-aregular';
    src: url(/css/font/ocr-aregular.ttf);
   
  }

  
  *{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    font-family:'ocr-aregular';
    scroll-behavior: smooth;

    
   
   
  }
  html {
    scroll-behavior: smooth;
    width: 100%;
    -webkit-width: 100%;
    cursor: url(../arrowdown.svg),auto;
  }

body{
  background-image: url(../imagens-extra/fundo1.jpg);
  background-attachment: fixed;
  background-size: 100vw;
  width: 100%;
  -webkit-width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
  
  }

  progress {
    position: fixed;
    left: 3%;
    bottom: 0.5%;
    width: 94%;
    height: 1%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: rgba(0, 0, 0, 0.178);
    z-index: 200;
    border-radius: 25px;
    
  }
  
  progress::-webkit-progress-bar {
    background-color: transparent;
    z-index: 10;
  }
  
  progress::-webkit-progress-value {
    border-radius: 15px;
    background-color: #000000;
    z-index: 10;
  }
  
  progress::-moz-progress-bar {
    border-radius: 15px;
    background-color: #000000;
    z-index: 10;
  }
  
  .progress-container {
    width: 100%;
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    height: 15px;
    display: block;
    z-index: 10;
  }
  
  .progress-bar {
    background-color: #000000;
    width: 0%;
    display: block;
    height: inherit;
    z-index: 10;
  }

/* HEADER */


  p.titlescroll{
    position: relative;
    margin-top: 5%;
      color: #000;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      font-weight: lighter;
      font-size: 1vw;
      z-index: 99;
    }

.worldscale{

  position: fixed;
  animation: scale 2s linear;
  margin-left: auto;
  margin-right: auto;
  padding: 0% 10%;
  width: 100%;
  top: 3vw;

}

    img.world{
       
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 5%;
      }
        
  /*scroll-animation*/
  @keyframes scale {
    0% {
      position: fixed;
      top: 40vw;

      transform: scale(4);

    }
    50% {
      position: fixed;
      top: 40vw;

      transform: scale(4);

    }
 
    100% {
      position: fixed;
      top:  3vw;
        transform: scale(1);
       
    }
  }
  






      .world22{
        position:relative;
        height:50%;
        margin-top:4000px;
        border:4px dashed rgba(255, 0, 0, 0);
      }
      


    /* SETA*/

    p.seta{
        position: relative;
        margin-top: 10%;
        padding-top: 2vw;
        padding-bottom: 2vw;
          color: #000;
          margin-left: auto;
          margin-right: auto;
          text-align: center;
          font-weight: bold;
          font-size: 1.5em;
          z-index: 7;
        }
    
    .arrow {
          border: solid black;
          border-width: 0 3px 3px 0;
          display: inline-block;
          padding: 1vw;
        }
    .down {
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
        }


        /* TITLES */
        
        .child-sticky {
          position: -webkit-sticky;
            position: sticky;
             top: 45%;
            width: 100vh;
            margin-top:45%;
            margin-bottom: 45%;
            z-index: 99;
            
          }
          h1{
  
            position: relative;
           transform: translateY(-50%);
            white-space: nowrap;
            font-size: 5vw;
          
           
          }

            /* 1PART */


            p.maintitles{
                position: relative;
                margin-top: 3vw;
                  color: #000;
                  margin-left: auto;
                  margin-right: auto;
                  text-align: center;
                  font-weight: bold;
                  font-size: 2vw;
                  z-index: 7;
            
                  
                }

                p.subtitles{

                    color: #000;
                    margin-left: auto;
                    margin-right: auto;
                    text-align: center;
                    font-weight: bold;
                    font-size: 1vw;
                  
                  }
                      



section.rotating0
{
    position: relative;
    margin-top: 0%;
    width: 100%;
    overflow: visible;


}


section .scroll{
    width: 150%;
    display: flex;

    
    }
    
section .scroll div{
    white-space: nowrap;
    text-transform: uppercase;
    animation: animate 40s linear infinite;
    padding-left: 0.5%;
   }
 
 
 
   @keyframes animate {
     0% {
           transform: translateX(0%);
     }
    100%
     {
           transform: translateX(-100%);
 }}
 
 
 
 
 section .scroll.text-1{
   transform: rotate(-10deg) translateY(-360%) translateX(-200px);
   box-shadow: 0 5px 15px rgba(0,0,0,.5);
   color: rgba(255, 255, 255, 0.856);
   font-size: 3vw;
   background: rgb(0, 0, 0);
   border: 2px rgb(255, 255, 255) solid;
 }
 
 section .scroll.text-2{
   transform: rotate(9deg) translateY(1000%) translateX(-200px);
   box-shadow: 0 5px 15px rgba(0,0,0,.5);
   color: rgba(255, 255, 255, 0.856);
   font-size: 3vw;
   background: rgb(0, 0, 0);
   border: 2px rgb(255, 255, 255) solid;
   
 }
 
 section .scroll.text-3{
   transform: rotate(-5deg) translateY(-270%) translateX(-200px);
   box-shadow: 0 5px 15px rgba(0,0,0,.5);
   color: rgba(255, 255, 255, 0.856);
   font-size: 3vw;
   background: rgb(0, 0, 0);
   border: 2px rgb(255, 255, 255) solid;
 }
 
 section .scroll.text-4{
   transform: rotate(-2deg) translateY(-400%) translateX(-200px);
   box-shadow: 0 5px 15px rgba(0,0,0,.5);
   color: rgba(255, 255, 255, 0.856);
   font-size: 3vw;
   background: rgb(0, 0, 0);
   border: 2px rgb(255, 255, 255) solid;
 }
 

    /* 1- DATA GENERATION */


    .datageneration{
        position:relative;
        margin-top: 25vw;
        border:4px dashed rgba(255, 0, 0, 0);
      }

      .datagenerationsticky{
        position: -webkit-sticky;
        position: sticky;
        top: 13%;
        color: #000;
       
        width: 45vw;
        border-radius: 15px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-weight: bold;
        font-size: 3vw;
        z-index: 999;
      }
      p.line-1{
        position: relative;
        top: -7%;
        font-size: 1.3em;
        white-space: nowrap;
        margin-bottom: 6%;
      }


      .objectbubble{
        height: 2400px;
        
      }

      .objectbubble-sticky{
        position: -webkit-sticky;
        position: sticky;
        margin-top: 20%;
        top: 15%;
        
      }
      .container{
        margin-top: -25vw;
        position: absolute;
        width: 100%;
        height: 220%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible;
        z-index: -1;
      }
      
      .container img{
        position: absolute;
        width: 100%;
        height: 100%;
        top:0%;
        left: 0;
        object-fit: contain;
      }
      


      span{
        font-weight: bold;
      }

      section.datagen{
       
        overflow: visible;
        display:flex;
        justify-content: center;
        align-items:  center;
        z-index:5;
        margin-top: 15%;
      }
  
 
        .container11 {        
          padding: 10% 5% 10% 0%;
          margin-right: 5%;
          height: 100%;
          width: 80%;
      
        }
        
        .container12 {

          padding: 10% 0% 10% 5%;
          margin-left: 5%;
          height: 100%;
          width: 80%;
        }
        
        
       
      
        .inside-elements2{
          margin-left: auto;
          margin-right: auto;
          background-color: rgba(255, 255, 255, 0.767);
          border: 0.2vw solid black;
          border-right: 1vw solid black;
          border-bottom: 1vw solid black;
          border-radius: 20px;
          padding: 5%;
         
          width: 85%;
      
        
     
        }
        .inside-elements2:hover{
          background-color: rgb(0, 0, 0);
          color: rgba(255, 255, 255, 0.664);
          border: 0.2vw solid  #fff;
          cursor: url(../arrowdownwhite.svg),auto;
            box-shadow: 5px 5px 20px rgb(90, 90, 90);
          padding: 6%;
 

        }

        .inside-elements2:hover i{
          transition: 1s linear;
          font-weight: 900;
          color: #fff;
          
        }
        
.pattern2{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 1.5vw;
}

    
    
   









.stack1{
    height: 110vw;
  }
  
  
  .data1{
    position: -webkit-sticky;
    position: sticky;
     top: 25%;
    margin-top: 5vw;
    color: #000;
    margin-left: auto;
    margin-right: auto;
   align-items: center;
  
  
  }
  .data1 img{
    margin-left: auto;
    margin-right: auto;
   align-items: center;
   display: block;
   z-index: 1;
  }
  
  p.titleanonimosation{
    position: relative;
    margin-top: 5%;
      color: #000;
      margin-left: auto;
      margin-right: auto;

      text-align: center;
      font-weight: bold;
      font-size: 2vw;
      z-index: 7;
      
    } 
    .data2{
      position: -webkit-sticky;
        position: sticky;
        top: 25%;
        margin-top: 0vw;
        color: #000;
        margin-left: auto;
        margin-right: auto;
       align-items: center;
       
      
      }
      .data2 img{
        margin-left: auto;
        margin-right: auto;
       align-items: center;
       display: block;
       z-index: 1;
      }
      
      
      
    
    p.titlepoisoning{
        position: relative;
        margin-top: 1vw;
          color: #000;
          margin-left: auto;
          margin-right: auto;
    
          text-align: center;
          font-weight: bold;
          font-size: 2vw;
          z-index: 7;
          
        } 

        p.titlepoisoning2 {
              font-size: 1.5vw;
   
            }
      
    .contenthover div{
   
        position: relative;
        width: 35vw;
       
        background: #ffffff;
        padding: 3vw;
        text-align: center;
        font-weight: 900;
        color: rgb(0, 0, 0);
        border: 2px solid black;
        border-radius: 10px;
        
        visibility: hidden;

       }
       
       .contenthover:hover div{
      
        visibility: visible;
        opacity: 0.7; 
        font-size: 1.4vw;
        z-index: 99;
        
       }
       .poisoning{
         position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;

       }



          /* bubble text hover */
       .textbubble2{    z-index: 99;
        position: fixed;
          margin-top: -10%;
          margin-left: 59%;
         }
         .textbubble{
            z-index: 99;
            margin-top: -10%;
            margin-left: 55%;
           }
          
           .textbubble3{
            z-index: 99;
          position: relative;
            margin-top: -18%;
            margin-left: 59%;
           }
           
         

         .sb6:before {
            content: "";
            width: 0px;
            height: 0px;
            position: absolute;
            border-left: 8px solid transparent;
            border-right: 8px solid #000000;
            border-top: 8px solid #000000;
            border-bottom: 8px solid transparent;
            left: -18px;
            top: 7px;
          }
          .sb6:after {
            content: "";
            width: 0px;
            height: 0px;
            position: absolute;
            border-left: 7px solid transparent;
            border-right: 7px solid #fff;
            border-top: 7px solid #fff;
            border-bottom: 7px solid transparent;
            left: -11px;
            top: 10px;
          }

 /* 2- TRAINING DATASETS */ 
 .trainingdatasets{
    position:relative;
    height: 100%;
    margin-top: 0vw;
    border:4px dashed rgba(255, 0, 0, 0);
    
  }
  
  .trainingdatasetssticky{
    position: -webkit-sticky;
    position: sticky;
    top: 13%;
    color: #000;
   
    border-radius: 15px;
    width: 45vw;
  margin-bottom: 4%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    z-index: 999;
    font-weight: bold;
    font-size: 3vw;
  }
  
p.line-2{
    position: relative;
    top: 3%;
    font-size: 1.3em;
    white-space: nowrap;
    margin-bottom: 6%;
  }


  .column {
    float: left;
    width: 25%;
    padding: 5px;
  }

  p.trainingdatatext1{
    margin-top: -1.5vw;
    font-size: 1.3vw;
    font-weight: 500;
   
  
  }
  p.trainingdatatext2{
    margin-top: -6vw;
    font-size: 1.3vw;
  
  }
  p.trainingdatatext3{
    margin-top: -3vw;
    font-size: 1.3vw;
  
  }


  


   /* MOVING IMAGE */ 
   
.section1 {
    position: relative;
    margin-top: 1vw;

    
  }
  
  .soft-move {
      position: relative;
      left: 1927%;
      width: 2374px;
      height: 220px;
  }
  
  .sourceselection{
    margin-left: 30%; margin-top: 5%; height: 20vw;
   }

   p.textoperator{
    position: relative;
    margin-top: -5px;
    margin-bottom: 10px;
        color: #000;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      font-weight: bold;
      font-size: 2vw;
      z-index: 7;
  }
  
  img.ghost{
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    z-index: 99;
  }
  
  section.rotating2
{
  position: relative;
  margin-top: 0%;
  width: 100%;
  overflow-y: visible;

}
  section .scroll.text1{
    transform: rotate(-13deg) translateY(-1800%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
    
  }
  
  section .scroll.text2{
    transform: rotate(9deg) translateY(1000%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text3{
    transform: rotate(-5deg) translateY(-333%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;}
  
  section .scroll.text4{
    transform: rotate(-2deg) translateY(-200%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }

/* selection */

.selection{
    margin-left: 30%; margin-top:3%; height: 30vw;
   }


  
  /* dataformat */

.dataformathover{
  position: -webkit-sticky;
    position: sticky;
    top: 30%;
  }
  .dataformathover div{
    width: 35vw;
    background: #ffffff;
    padding: 3vw;
    text-align: center;
    font-weight: 900;
    color: rgb(0, 0, 0);
    border: 2px solid black;
    border-radius: 10px;  
    visibility: hidden;

   }
   .dataformathover:hover div{
    width: 35vw;
    padding: 3vw;
    visibility: visible;
    opacity: 0.7; 
    font-size: 1.4vw;
    
   }
  
img.dataformat{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
  

  

/* databaseformat */

.databaseformathover{
  position: -webkit-sticky;
    position: sticky;
    top: 30%;
  }
  
  .databaseformathover div{
    width: 30vw;
    background: #ffffff;
    padding: 3vw;
    text-align: left;
    font-weight: 900;
    color: rgb(0, 0, 0);
    border: 2px solid black;
    border-radius: 10px;
    visibility: hidden;

   }
   
   .databaseformathover:hover div{
    width: 30vw;
    padding: 3vw;
    visibility: visible;
    opacity: 0.7; 
    font-size: 1.4vw;
    
   }
   
img.databaseformat{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 35%;
  }
  

  section.rotating3
  {
    
    position: relative;
    margin-top: 0%;
    width: 100%;
    overflow: visible;

  }
  
  section.rotating4
  {
    position: relative;
    margin-top: 0%;
    width: 100%;
    overflow: visible;
 
  }
  
  
  
  section .scroll.text5{
    transform: rotate(355deg) translateY(-330%) translateX(-201px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text6{
    transform: rotate(9deg) translateY(1350%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text7{
    transform: rotate(347deg) translateY(-1250%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text8{
    transform: rotate(-2deg) translateY(-100%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text9{
    transform:rotate(15deg) translateY(1700%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  
  }
  
  section .scroll.text10{
    transform: rotate(350deg) translateY(-1400%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  












/* measurement */

.measurement{
    overflow: visible;
    position: relative;
    top: 0;
    
  }
  

  section.rotating5
  {
    position: relative;
    margin-top: 0%;
    width: 100%;
    overflow: visible;

  }
  
  
section .scroll.text11{
    transform: rotate(-13deg) translateY(-1400%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text12{
    transform: rotate(9deg) translateY(1300%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text13{
    transform: rotate(352deg) translateY(-1100%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;}
  
  section .scroll.text14{
    transform: rotate(-2deg) translateY(-200%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  

/* trainingdataset */

.trainingdatasethover{
    position: sticky;
    position: -webkit-sticky;
    top: 30%;
  }
  
  .trainingdatasethover div{
     
    
    width: 30vw;
    background: #ffffff;
    padding: 3vw;
    text-align: center;
    font-weight: 900;
    color: rgb(0, 0, 0);
    border: 2px solid black;
    border-radius: 10px;
    z-index: 99;
    visibility: hidden;

   }
   
   .trainingdatasethover:hover div{
    width: 35vw;
    padding: 3vw;
    visibility: visible;
    opacity: 0.7; 
    font-size: 1.4vw;
    
   }
  
   img.trainingdataset{
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 45%;
    z-index: 98;
  }
  .textbubble4{
    position: relative;
      margin-top: -12%;
      margin-left: 59%;
     }
  
  
     .objectbubble2{
      height: 2400px;
      
    }
    
    .objectbubble2-sticky{
      position: -webkit-sticky;
      position: sticky;
      margin-top: 20%;
      top: 15%;
      
    }



  .container2{
    margin-top: 1vw;
        position: absolute;
        width: 110%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible;
        z-index: -1;
  }
  
  .container2 img{
    position: absolute;
    width: 100%;
    height: 110%;
    top: 0;
    left: 0;
    object-fit: contain;
  }
  

  

  
section.datagen2{
    position: relative;
    top: 0vw;
    width: 100%;
    height: 45%;
    
    display:flex;
    justify-content: center;
    align-items:  center;
  }
  



      .container-111 {        
        padding: 10% 5% 10% 0%;
        margin-right: 5%;
        height: 100%;
        width: 80%;
    
      }
      
      .container-122 {

        padding: 10% 0% 10% 5%;
        margin-left: 5%;
        height: 100%;
        width: 80%;
      }
      
      
     
    
      .inside-elements3{
        margin-left: auto;
        margin-right: auto;
        background-color: rgba(255, 255, 255, 0.767);
        border: 0.2vw solid black;
        border-right: 1vw solid black;
        border-bottom: 1vw solid black;
        border-radius: 20px;
        padding: 5%;
       
        width: 85%;
    
      
   
      }
      .inside-elements3:hover{
        border: 0.2vw solid  #fff;
        background-color: rgb(0, 0, 0);
        color: rgba(255, 255, 255, 0.664);
        cursor: url(../arrowdownwhite.svg),auto;     
        box-shadow: 5px 5px 20px rgb(90, 90, 90);
      }

      .inside-elements3:hover i{
        transition: 1s linear;
        font-weight: 900;
        color: #fff;
        
      }

      .inside-elements3:hover p{
        color: rgb(255, 255, 255);
       
      }
      p.titlebench{
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        margin-top: 3px;
          color: #000;
          font-weight: bold;
          font-size: 1vw;
          z-index: 7;
          
        }
      
      
.pattern3{
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 1.5vw;
}










/* modelbuilding */


.modelbuildingsticky{
  position: -webkit-sticky;
    position: sticky;
    top: 13%;
    color: #000;
    margin-top: 1%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 4%;
    font-weight: bold;
    font-size: 3vw;
  }
  
  .modelbuilding{
    position:relative;
   margin-top: 10%;
    border:4px dashed rgba(255, 0, 0, 0);
  }
  
  p.line-3{
    position: relative;
    margin-top: 3%;
    font-size: 1.3em;
    white-space: nowrap;
    margin-bottom: 6%;
  }



  section.rotating6
  {
    position: relative;
    margin-top: 0%;
    width: 100%;
    overflow: visible;

  }
  



  section .scroll.text15{
    transform: rotate(-13deg) translateY(-1600%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text16{
    transform: rotate(9deg) translateY(1100%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text17{
    transform: rotate(357deg) translateY(-827%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;}
  
  section .scroll.text18{
    transform: rotate(-2deg) translateY(-427%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
/* MODEL */





.rotating-box {
  position: -webkit-sticky;
    position: sticky;
    top: 30%;
    width: 300px;
    height: 300px;
    margin: 150px auto;
    perspective: 800px; 
    z-index: 0;
  }
  
  .single-rb {
    
    height: 300px;
    transform-style: preserve-3d;
    animation: rotate 15s linear infinite;
    position: relative;
    transform: rotateX(141deg) rotateY(40deg);
    transition: .5s linear;
    z-index: 1;
  
  }
  .single-rb img {
    height: 300px;
    width: 300px;
  }
  .single-rb div {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.178); 
   
    border: 1px solid rgb(255, 255, 255);
  }
  .front-side {
    transform: translateZ(150px);
  }
  .back-side {
    transform: rotateY(180deg) translateZ(150px);
  }
  .left-side {
    transform: rotateY(-90deg) translateX(-150px);
    transform-origin: left;
  }
  .right-side {
    transform: rotateY(90deg) translateX(150px);
    transform-origin: right;
  }
  .top-side {
    transform: rotateX(-90deg) translateY(-150px);
    transform-origin: top;
  }
  .bottom-side {
    transform: rotateX(90deg) translateY(150px);
    transform-origin: bottom;
  }
  
  @keyframes rotate{
    0%{
    transform: rotateX(0deg) rotateY(0deg);
    }
    100%{
    transform: rotateX(360deg) rotateY(360deg);
    }
    }
    

p.model{
    position: relative;
    margin-top: 105px;
      color: rgb(255, 255, 255);
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      font-weight: 200;
      font-size: 3.5em;
      z-index: 7;
  }
  
  
section.rotating7
{
  position: relative;
  margin-top: 0%;
  width: 100%;
  overflow: visible;

}
section .scroll.text19{
    transform: rotate(-13deg) translateY(-1420%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text20{
    transform: rotate(9deg) translateY(1220%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text21{
    transform: rotate(357deg) translateY(-620%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;}
  
  section .scroll.text22{
    transform: rotate(-2deg) translateY(-120%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  

 /* testingenvironment */

 .testingenvironmenthover{
  position: -webkit-sticky;
    position: sticky;
    top: 20%;
  }
  
  .testingenvironmenthover div{ 
    width: 30vw;
    background: #ffffff;
    padding: 3vw;
    text-align: center;
    font-weight: 900;
    color: rgb(0, 0, 0);
    border: 2px solid black;
    border-radius: 10px;
    z-index: 99;
    visibility: hidden;

   }
   
   .testingenvironmenthover:hover div{
    width: 30vw;
    padding: 3vw;
    visibility: visible;
    opacity: 0.7; 
    font-size: 1.4vw;
    
   }
  
  
img.testingenvironment{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 65vw;
  }
  
  
 /* algorithm */
  .stack8{
    height: 1900px;
  }
  
  
  
  
  .box{
    
    visibility: visible;
    position: -webkit-sticky;
    Position: sticky;
    background-color: #ffffffb0;
    border: 0.2vw solid black;
    border-right: 1vw solid black;
    border-bottom: 1vw solid black;
    border-radius: 15px;
    color: #000;
    padding: 2%;
    text-align: center;
    font-size: 2vw;
    font-weight: bold;
    text-transform: none;
  
  
  }
.box:hover{
  font-size: 2.2vw;

  box-shadow: 0px 5px 20px rgb(90, 90, 90);
}

  .box1{

    top: 30%;
    margin-left: auto;
    margin-right: auto;
      width: 30%;
    
  }
  
  .box2{
    top: 42%;
     margin-left: auto;
     margin-right: auto;
      width: 51%;  
      height: 12vw;
      padding: 2% 5%;
      }

  .box3{
  
    top: 63%;
    margin-left: auto;
    margin-right: auto;
      width: 30%;
  
    
  }
  

  
  .containeralgorithm {
    margin-top:10%;
    height: 100vh;
    width: 65vw;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;
  }
  .boxalgorithm {
    
    background-color: rgba(255, 255, 255, 0.767);
    border: 0.2vw solid black;
    border-right: 1vw solid black;
    border-bottom: 1vw solid black;
    border-radius: 20px;
    padding: 3%;
    width: 55%;
    position: -webkit-sticky;
    position: sticky;
    top: 25%;
  }
  .boxalgorithm:hover {
    box-shadow: 5px 5px 20px rgb(90, 90, 90);

  }
 
 

  
  img.algorithm{
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    z-index: 7;
    
  }


 /* model learning*/



 section.rotating8
 {
   position: relative;
   margin-top: 0%;
   width: 100%;
   overflow: visible;

 }
 

section .scroll.text23{
    transform: rotate(-13deg) translateY(-1420%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text24{
    transform: rotate(9deg) translateY(1220%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text25{
    transform: rotate(357deg) translateY(-520%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;}
  
  section .scroll.text26{
    transform: rotate(-2deg) translateY(-720%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  



 /* 4- IMPLEMENTATION */


 .implementation{
    position:relative;
   margin-top: 0%;
   padding-bottom: 10%;
    border:4px dashed rgba(255, 0, 0, 0);
  }
  
  
  .implementationsticky{
    position: -webkit-sticky;
    position: sticky;
    top: 13%;
    color: #000;
    margin-top: 1%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 4%;
    font-weight: bold;
    font-size: 3vw;
  }
  


.implementationhover{
  position: -webkit-sticky;
  position: sticky;
  top: 25%;
}

.implementationhover div{
   
  
  width: 35vw;
  background: #ffffff;
  padding: 3vw;
  text-align: center;
  font-weight: 900;
  color: rgb(0, 0, 0);
  border: 2px solid black;
  border-radius: 10px;
  z-index: 99;
  visibility: hidden;

 }
 
 .implementationhover:hover div{
  width: 35vw;
  padding: 3vw;
  visibility: visible;
  opacity: 0.7; 
  font-size: 1.4vw;
  
 }
 

   .textbubble5{
    position: relative;
      margin-top: -25%;
      margin-left: 49%;
     }
     .textbubble6{
      position: relative;
        margin-top: -25%;
        margin-left: 59%;
       }
  

 img.runmodel{
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  z-index: 98;
  margin-top: 2%;
}


  p.line-4{
    position: relative;
    top: 3%;
    font-size: 1.3em;
    white-space: nowrap;
    margin-bottom: 6%;
  }
  
p.titlemodel{
    position: relative;
    margin-top: -20px;
      color: #000;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      font-weight: bold;
      font-size: 2vw;
      z-index: 7;
      
    }

    p.titleblackbox{
        position: relative;
        margin-top: 8%;
        margin-bottom: 0%;
          color: #000;
          margin-left: auto;
          margin-right: auto;
          text-align: center;
          font-weight: bold;
          font-size: 2vw;
          z-index: 7;
          
        }
    
  section.datagen3{
   
    margin-top: 0%;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
 flex-wrap: nowrap;
 justify-content: center;
 align-content: stretch;
    
  }
  

        .container23 {        
          padding: 15% 0% 0 10%;
          height: 150vh;
          width: 100%;
      
        }
        
        .container22 {
          padding: 15% 10% 0 0%;
          height: 150vh;
          width: 100%;
        }
        
        
       
      
        .inside-elements{
          margin-left: auto;
          margin-right: auto;
          background-color: rgba(255, 255, 255, 0.767);
          border: 0.2vw solid black;
          border-right: 1vw solid black;
          border-bottom: 1vw solid black;
          border-radius: 20px;
          padding: 10%;
         
          width: 65%;
          font-size: 1vw;
          position: -webkit-sticky;
          position: sticky;
          top: 35%;
     
        }
        .inside-elements:hover{
          border: 0.2vw solid  #fff;
          background-color: rgb(0, 0, 0);
          color: rgb(255, 255, 255);
          cursor: url(../arrowdownwhite.svg),auto;     
              box-shadow: 5px 5px 20px rgb(90, 90, 90);
          font-size: 1.3vw;
 

        }

.pattern{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 1.5vw;
}

    
    

 
  
  

section.rotating9
{
  position: relative;
  margin-top: 0%;
  width: 100%;
  overflow: visible;

}



section .scroll.text27{
    transform: rotate(5deg) translateY(504%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text28{
    transform: rotate(9deg) translateY(1120%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }
  
  section .scroll.text29{
    transform: rotate(357deg) translateY(-670) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;}
  
  section .scroll.text30{
    transform: rotate(-16deg) translateY(-2119%) translateX(-200px);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    color: rgba(255, 255, 255, 0.856);
    font-size: 3vw;
    background: rgb(0, 0, 0);
    border: 2px rgb(255, 255, 255) solid;
  }


  .world23{
    position:relative;
    height: 60vw;
    top:0vw;
    border:4px dashed rgba(255, 0, 0, 0);
  }
  
  img.world2{
  
    
    width:27%;
    top:3%;
    display: block;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
  }
  
  
 

body {
  -ms-overflow-style: none;   
  scrollbar-width: none;   
}
::-webkit-scrollbar { 
  display: none;   
}
 


   /* a LINKS */

   

a:link {
  color: rgb(0, 0, 0);
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: rgb(0, 0, 0);
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: rgb(0, 0, 0);
  background-color: transparent;
  font-style: italic;
  font-weight: 600;
  
  
}

a:active {
  color: rgb(0, 0, 0);
  background-color: transparent;
  text-decoration: none;
}


a.subtitles:link {
  color: rgb(0, 0, 0);
  background-color: transparent;
  text-decoration: none;
}

a.subtitles:hover {
  background-color: transparent;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: #000000; 
    text-decoration: none;
    cursor: pointer;     
}


a.bias:link {
    color: rgb(255, 255, 255);
    background-color: transparent;
    text-decoration: none;
    font-weight: 100;
  }
  
  a.bias:visited {
    color: rgb(255, 255, 255);
    background-color: transparent;
    text-decoration: none;
  }
  
  a.bias:hover{
    color: rgb(255, 255, 255);
  }
  section div.scroll:hover {
   
    background-color: black;
  font-size: 3.05vw;
    font-style: italic;
    font-weight: 900;
    color: rgb(255, 255, 255);
    text-decoration: underline;
   transition: linear 1s;
   cursor: pointer; 
  
  }
  
   
  
  
  a.bias:active {
    color: rgb(255, 255, 255);

    background-color: transparent;
    text-decoration: underline;
    
  }



  a.refs:link {
    color: rgb(255, 255, 255);
    background-color: transparent;
    text-decoration: none;
    font-size: 0.8vw;
  }
  
  a.refs:visited {
    color: rgb(255, 255, 255);
    background-color: transparent;
    text-decoration: none;
    font-size: 0.8vw;
  }
  a.refs:hover {
    color: rgb(255, 255, 255);
font-size: 0.85vw;
font-size: italic;
    color: white;
 
      text-decoration: none;
      transition: 0.5s linear;
  }

  a.refs:active {
    color: rgb(255, 255, 255);
    background-color: transparent;
    text-decoration: none;
    font-size: 0.8vw;
  }

 
  
  a.looper:link {
    color: rgb(0, 0, 0);
    background-color: transparent;
    text-decoration: none;
    font-size: 3vw;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: #000000; 
  }
  
  a.looper:visited {
    color: rgb(255, 255, 255);
    background-color: transparent;
    text-decoration: none;
    font-size: 3vw;
  }
  a.looper:hover {
    color: rgb(255, 255, 255);
    font-size: 3vw;
font-size: italic;
    color: white;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: #000000; 
      text-decoration: none;

  }

  
  a.looper:active {
    color: rgb(255, 255, 255);
    background-color: transparent;
    text-decoration: none;
    font-size: 3vw;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: #000000; 
  }



 /* disclaimer safari only */

  p.disclaimer-1
  {

    padding: 0 10%;
    width: 100%;
    position: fixed;
    top: 2%;
      color: rgb(0, 0, 0);
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      font-size: 15px;
      z-index: 99;
    

      
    }


    
  /* mobile */

  @media only screen and (max-width: 768px) {
    p.disclaimer-1
  {
    top: 8%;
    font-size: 10px;
      
    }


    
    p.maintitles {
        font-size: 3vw;
    }

    p.subtitles {
        font-size: 2vw;
    }

      .poisoning{
       width: 60%;
      }
      
      .star {
        border-radius: 8px;
      }

      .sourceselection{
        height: 30vw;
       }
    
       p.textoperator{
          font-size: 3vw;

      }
      img.operador{
        width: 40%;
      }
      img.ghost{
        width: 50%;
      }
      img.dataformat{     
        width: 80%;
      }
      .section1 {
        margin-top: 10vw;
      }

      .selection{
      height: 45vw;
       }

       img.databaseformat{    
        width: 60%;
      }
    
      img.testingenvironment{
        width: 80vw;
      }
      .box{
        border-radius: 8px;
      }

.box1{
    top: 38%;
}
.box3{
    top: 48%;
}

img.runmodel{
width: 55%;
}

.single-rb div { 
background-color: rgb(0 0 0 / 13%);

}
a.refs:link {
  font-size: 1.5vw;
}

.objectbubble-sticky{
  top: 25%;

}

.objectbubble2-sticky{
  top: 25%;
  
}
.star {
  border-radius: 45px;

}


}